<template>
  <div class="app-container" style="background:#aaa;padding: 5px;">
    <el-container style="min-height: 600px;">
      <el-aside width="200px" style="padding: 6px 5px;background:#eee;">
        <el-tree
          :data="catalogs"
          node-key="id"
          ref="catalog"
          highlight-current
          :props="defaultProps"
          @node-click="getCheckedKeys"
        ></el-tree>
      </el-aside>

      <el-container>
        <el-aside width="100%" style="padding: 6px 5px;background:#fff;">
          <el-row :gutter="24">
            <el-form ref="searchForm" :model="searchData" size="medium" label-width="100px">
              <el-col :span="8">
                <el-form-item label="类目" prop="catalogId">
                  <el-select v-model="searchData.catalogId" placeholder="请选择类目" :disabled="true"
                             :style="{width: '100%'}">
                    <el-option
                      v-for="item in dataList"
                      :key="item.catalogName"
                      :label="item.catalogName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品编码" prop="productCode">
                  <el-input v-model="searchData.productCode" placeholder="请输入产品编码" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称" prop="productName">
                  <el-input v-model="searchData.productName" placeholder="请输入产品名称" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批准文号" prop="approvalNumber">
                  <el-input v-model="searchData.approvalNumber" placeholder="请输入批准文号" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关键字" prop="keywords">
                  <el-input v-model="searchData.keywords" placeholder="请输入关键字" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="品牌" prop="brand">
                  <el-input v-model="searchData.brand" placeholder="请输入品牌" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item size="large">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="primary" @click="open">新增</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <el-table :data="products" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="id" prop="id" align="center" width="100">
              <template slot-scope="{row}">
                <span>{{row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" prop="dictionaryName" align="center">
              <template slot-scope="{row}">
                <span> {{row.productCode}} </span>
              </template>
            </el-table-column>

            <el-table-column label="产品名称" prop="clazz" align="center" width="200">
              <template slot-scope="{row}">
                <span>{{row.productName}}</span>
              </template>
            </el-table-column>

            <el-table-column label="批准文号" prop="clazz" align="center" width="200">
              <template slot-scope="{row}">
                <span>{{row.approvalNumber}}</span>
              </template>
            </el-table-column>

            <el-table-column label="品牌" prop="clazz" align="center" width="200">
              <template slot-scope="{row}">
                <span>{{row.brand}}</span>
              </template>
            </el-table-column>

            <el-table-column label="关键字" prop="clazz" align="center" width="100">
              <template slot-scope="{row}">
                <span>{{row.keywords}}</span>
              </template>
            </el-table-column>

            <el-table-column label="启用" prop="available" align="center" width="100">
              <template slot-scope="{row}">
                <span>{{row.isDelete === 0}}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" prop="id" align="center">
              <template slot-scope="{row}">
                <el-button type="primary" @click="showDetail(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :page-size="searchData.pageSize"
            layout="prev, pager, next"
            :total="searchData.totalCount"
            @prev-click="search(-1)"
            @next-click="search(1)"
          ></el-pagination>

        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {getCatalog,} from '@/api/store'
  import {getProducts, addProducts, editProducts} from '@/api/product'

  export default {
    name: "catalog",
    data() {
      return {
        products: [],
        searchData: {
          catalogId: null,
          productCode: "",
          productName: "",
          approvalNumber: "",
          keywords: "",
          brand: "",
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 20
        },
        title: "",
        dialogVisible: false,
        targetCatalog: {},
        catalogs: [],
        dataList: [],
        defaultProps: {
          children: "children",
          label: "catalogName"
        },

      }
    },
    created() {
      window.app = this;
      this.getCatalogs();
      this.search();
    },
    methods: {
      open() {
        this.$router.push({name:"productKeep",params:{dataList:this.dataList}})
      },
      saveProduct() {
        this.$refs['addForm'].validate(valid => {
          if (!valid) return
          this.addData.isDelete = this.addData.isDelete ? 0 : 1
          if (this.addData.id) {
            //编辑
            editProducts(this.addData).then(response => {
              if (response.code === 200) {
                this.$message({
                  showClose: true,
                  message: response.msg,
                  type: "success"
                });
              }
            });
          } else {
            //新增
            addProducts(this.addData).then(response => {
              if (response.code === 200) {
                this.$message({
                  showClose: true,
                  message: response.msg,
                  type: "success"
                });
              }
            });
          }
          this.$refs['addForm'].resetFields()
          this.dialogVisible = false;
          this.searchData.page = 0;
          this.search();
        })
      },
      pictureBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      showDetail(product) {
        /*this.dialogVisible = true;
        this.title = "商品详情"
        this.addData = product
        this.addData.isDelete = (product.isDelete === 0 )*/
        this.$router.push({name:"productKeep",params: {product:product,dataList:this.dataList}})
      },
      search(n) {
        if (typeof n === "number") {
          this.searchData.page = this.searchData.page + n;
        }
        getProducts(this.searchData).then(response => {
          if (response.code === 200) {
            this.products = response.page.list;
            this.searchData.page = response.page.currPage;
            this.searchData.totalPage = response.page.totalPage;
            this.searchData.totalCount = response.page.totalCount;
          }
        });
      },
      reset() {
        this.$refs['searchForm'].resetFields()
        this.$refs['addForm'].resetFields()
        this.searchData.catalogId = null;
      },
      getCheckedKeys(catalog) {
        this.targetCatalog = catalog;
        this.searchData.catalogId = catalog.id
      },
      getCatalogs() {
        getCatalog({"pageSize": -1}).then(response => {
          if (response.code === 200) {
            this.dataList = response.page.list
            this.catalogs = this.getTree(response.page.list)
          }
        })
      },
      getTree(d) {
        let temp = {};
        for (let k in d) {
          if (!temp[d[k].id]) {
            temp[d[k].id] = d[k];
          }
        }
        let tree = [];
        for (let i in temp) {
          if (temp[i].parentId) {
            if (!temp[temp[i].parentId].children) {
              temp[temp[i].parentId].children = [];
            }
            temp[temp[i].parentId].children.push(temp[i]);
          } else {
            tree.push(temp[i]);
          }
        }
        return tree;
      }
    }
  }
</script>

<style scoped>

</style>
